<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div id="editForm" >
    <form class="layui-form"  lay-filter="editForm">
<!--        <div class="layui-form-item" style="display: none;">-->
<!--            <label class="layui-form-label required" >ID</label>-->
<!--            <div class="layui-col-md2">-->
<!--                <input type="text" name="engineerId" lay-verify="readonly" readonly autocomplete="off" class="layui-input">-->
<!--            </div>-->
<!--        </div>-->

        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-col-md2">
                <input type="text" name="engineerName" lay-verify="required" autocomplete="off" class="layui-input" readonly>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-col-md2">
                <input type="text" name="engineerPhone" lay-verify="phone" autocomplete="off" class="layui-input">
            </div>
        </div>

<!--        <div class="layui-form-item" style="display: none;">-->
<!--            <label class="layui-form-label">派单等级</label>-->
<!--            <div class="layui-col-md2">-->
<!--                <select name="engineerLevel">-->
<!--                    <option value="">请选择</option>-->
<!--                    <option value=0>0</option>-->
<!--                    <option value=1>1</option>-->
<!--                    <option value=2>2</option>-->
<!--                    <option value=3>3</option>-->
<!--                </select>-->
<!--            </div>-->
<!--        </div>-->

        <div class="layui-form-item">
            <label class="layui-form-label">个人描述</label>
            <div class="layui-col-md4">
                <input type="text" name="engineerDescription" lay-verify="" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item" id="picker">
            <div class="layui-form-label" >居住地址</div>
            <div class="layui-input-inline" style="width: 200px;">
                <select name="engineerProvince"  class="province-selector"  lay-filter="province-1">
                    <option value="">请选择省</option>
                </select>
                <tip>注：更改信息会重新审核</tip>
            </div>
            <div class="layui-input-inline" style="width: 200px;">
                <select name="engineerCity" class="city-selector"  lay-filter="city-1">
                    <option value="">请选择市</option>
                </select>
            </div>
            <div class="layui-input-inline" style="width: 200px;">
                <select name="engineerArea"  class="county-selector"  lay-filter="county-1">
                    <option value="">请选择区</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">变更原因</label>
            <div class="layui-col-md4">
                <input type="text" name="changeReason" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
            </div>
        </div>

    </form>

</div>



<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="../../js/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0"></script>

<script>



    layui.use(['form','layarea','layer'], function () {
        var form = layui.form,
            layarea = layui.layarea,
            layer = layui.layer,
            $ = layui.$;


        // 自定义验证规则
        form.verify({
            phoneOrEmpty: function(value, item) {
                // 判断是否为空
                if (value === '') {
                    return; // 不进行验证，直接通过
                }
                // 验证手机号格式
                var phoneReg = /^1[34578]\d{9}$/;
                if (!phoneReg.test(value)) {
                    return '请输入正确的手机号格式'; // 返回错误提示信息
                }
            }
        });

        var originalAddress;
        var updatedAddress;
        var originalData;


        axios.get('http://localhost:8080/engineer/getMyInfo', {
            withCredentials: true

        }).then(function(res){
            originalData = res.data.data;
            console.log(originalData)
            layui.form.val('editForm', originalData);
            console.log("这是根据engineerId查询的data "+originalData)
            originalAddress = originalData.engineerProvince+originalData.engineerCity+originalData.engineerArea;
            layarea.render({
                elem: '#picker',

                data: {
                    province: originalData.engineerProvince,
                    city: originalData.engineerCity,
                    county: originalData.engineerArea,
                },
                change: function (res) {
                    // 选择结果
                    updatedAddress = res.province + res.city + res.county;
                    console.log(updatedAddress);
                }
            });
        }).catch(function(error) {
            console.log(document.cookie)
            // 请求失败的处理逻辑
            console.error(error);
        });

        // 检查表单内容是否有变动的函数
        // 检查表单内容是否有变动的函数
        function isFormChanged() {
            var currentData = form.val('editForm');
            for (var key in currentData) {
                if (key === 'engineerId') {
                    // 将原始数据的类型转换为字符串类型
                    var originalValue = originalData[key].toString();
                    var currentValue = currentData[key];
                    if (originalValue !== currentValue) {
                        return true;
                    }
                } else {
                    if (currentData[key] !== originalData[key]) {
                        return true;
                    }
                }
            }
            return false;
        }




        form.on('submit(saveBtn)', function (data) {
            event.preventDefault();

            if (isFormChanged()) {


                layer.confirm('是否确定提交变更？', {
                    btn: ['确定', '取消'], // 自定义按钮文本
                    shadeClose: true
                }, function(index) {
                    // 在这里执行接单的逻辑

                    var currentData = data.field;
                    delete currentData.engineerName;
                    console.log(currentData)
                    axios.post('http://localhost:8080/engineer/getChange', currentData,{
                        withCredentials: true

                    }).then(function(response){
                        console.log("成功")
                    }).catch(function(error) {
                        // 请求失败的处理逻辑
                        console.error(error);
                    });


                    layer.msg("变更审核已提交")
                    layer.close(index); // 关闭确认窗口
                },function (index){

                    layer.close(index)
                });


            } else {
                // The form content has not changed, display a message
                layer.msg("表单内容未变动，无需提交");
            }

            return false;
        });

            return false;
        });








</script>
</body>
</html>